<template>
	<div class="MainList2">
		<div class="tab2-bottom ">
			<ol>
				<li v-for="item in twoList" :key="item.id">
					<router-link to="/">
						<img :src="item.imgURL" />
						<aside>
							<h3>{{item.title}}</h3>
							<span>{{item.msg}}</span>
						</aside>
					</router-link>
				</li>
			</ol>
		</div>
		<div class="tab3-bottom">
			<ul>
				<li v-for="item in twoList1" :key="item.id">
						<router-link to="/">
							<p>{{item.name}}</p>
							<label>{{item.msg}}</label>
						</router-link>
					</li>
			</ul>	
		</div>
	</div>
</template>

<script>
	export default{
		name:'MainList2',
		data() {
			return {
				twoList: [{
						id: 1,
						imgURL: 'img/seazon1.jpg',
						title: '克罗地亚',
						msg: '君临之城'
					
					},
					{
						id: 2,
						imgURL: 'img/seazon2.jpg',
						title: '槟城',
						msg: '风味南洋'
					},
					{
						id: 3,
						imgURL: 'img/seazon3.jpg',
						title: '纳米比亚',
						msg: '狂野非洲'
					},
				
				],
				twoList1 : [
					{ id:1 , name:'新加坡',msg:'花园城市'},
					{ id:2 ,  name:'格鲁吉亚'},
					{ id:3 , name:'缅甸'},
					{ id:4 , name:'三亚'},
					{ id:4 , name:'墨西哥'},
					{ id:5 , name:'吴哥迷城',msg:'花园城市'},
				]
				
				
			}
		},
	}
</script>

<style scoped>
	.MainList2 .tab2-bottom ol {
				width: 100%;
				height: 100%;
			     margin-top: 0.2rem;
				 display: flex;
			}
		
			.MainList2 .tab2-bottom ol li {
				width: 100%;
				height: 100%;
				float: left;
				position: relative;
			}
		.MainList2 .tab2-bottom  ol li:nth-child(even){
			float: right;
		
		 }
			.MainList2 .tab2-bottom ol li a {
				width: 100%;
				height: 70%;
				float: left;
				margin-top: 0.3rem;
			}
			
		.MainList2 .tab2-bottom ol li img{
				width: 97%;
				height: 100px;
				float: left;
				border-radius: 0.1rem;
			}
		
			.MainList2 .tab2-bottom ol li aside span{
				 text-decoration: none;
				overflow: hidden;
			     font-size: 0.45rem;
			      line-height: 0.45rem;
				  position: absolute;
				  left: 18%;
				  top: 52%;
				  text-decoration: none;
				  color:white;
			}
			.MainList2 .tab2-bottom ol li aside h3{
				font-size: 0.3rem;
				line-height: 0.3rem;
				overflow: hidden;
				color: white;
			  position: absolute; 
				 left: 25%;
				 top: 77%;
			      text-decoration: none;
			    
			}
			
		.MainList2 .tab2-bottom ol aside p{
			color:#ffa961 ;
			position: absolute;
			left: 5%;
			top: -100%;
			color: #DCDCDC;
			font-weight: bold;
		}
		.tab3-bottom{
			width: 100%;
			overflow: hidden;
			margin-top: 0.2rem;
		}
		.tab3-bottom ul li p{
			float: left;
			width: 30%;
			line-height: 1.2rem;
			background-color: #FFFFFF;
			margin-left: 0.2rem;
			margin-top: 0.2rem;
			text-align: center;
			border-radius: 0.15rem;
			border: 0.05rem solid gainsboro;
		}
		.tab3-bottom ul li a{
			text-decoration: none;
			color: black;
		}
		.tab3-bottom ul li label{
			position: absolute;
			left:2%;
			/* top: 60%; */
			width: 1.6rem;
			line-height: 0.45rem;
			text-align: center;
			background-color: #ffdd3f;
			border-radius: 0.15rem 0 0.3rem 0;
		}
		
		
</style>
